<template>
  <div class="app-container">
    <el-input
      v-model="searchValue"
      class="search-input"
      placeholder="搜索内容"
      prefix-icon="el-icon-search"
    />
    <el-table
      v-loading="listLoading"
      :data="filteredList"
      element-loading-text="Loading"
      border
      fit
      highlight-current-row
    >
      <el-table-column align="center" label="ID" width="80">
        <template slot-scope="scope">
          {{ scope.$index + 1 }}
        </template>
      </el-table-column>
      <el-table-column
        v-for="config in thArr"
        :key="config.key"
        :align="config.align"
        :label="config.label"
        :width="config.width"
      >
        <template slot-scope="scope">
          {{ scope.row[config.key] }}
        </template>
      </el-table-column>

      <el-table-column label="操作" align="center" width="160">
        <template slot-scope="scope">
          <el-row>
            <el-button icon="el-icon-search" circle @click="() => onEditRow(scope.row)" />
          </el-row>
        </template>
      </el-table-column>
    </el-table>
    <div class="create-area">
      <el-button type="primary" round @click="() => onEditRow()">新增</el-button>
    </div>
  </div>
</template>

<script>
export default {
  name: 'BaseCrudTable',
  props: {
    thArr: {
      type: Array,
      required: true
    },
    onEditRow: {
      type: Function,
      required: true
    },
    listLoading: {
      type: Boolean,
      required: true
    },
    list: {
      type: Array,
      required: true
    }
  },
  data() {
    return {
      searchValue: ''
    }
  },
  computed: {
    filteredList() {
      return this.list.filter(item => {
        return Object.values(item).some(val => {
          const valStr = String(val)
          if (typeof valStr === 'string') {
            return valStr.includes(this.searchValue)
          }
        })
      })
    }
  }
}
</script>

<style lang="scss" scoped>
  .search-input {
    margin-bottom: 15px;
  }
  .create-area {
    float: right;
    margin-top: 10px;
  }
</style>
